import { Popconfirm } from 'antd';
import { useMemo } from 'react';
import { DeleteIcon } from '../Icon';
import './index.less';

interface IProps {
  children?: JSX.Element | string;
  onClick?: () => void;
  submit?: boolean;
  fullWidth?: boolean;
  plain?: boolean;
  danger?: boolean;
  style?: any;
}

interface IDelProps extends IProps {
  onRemove: () => void;
}

const TButton = (props: IProps) => {
  const {
    children,
    onClick,
    submit = false,
    fullWidth = false,
    plain = false,
    danger = false,
    style = {},
  } = props;

  const btnClass = useMemo(() => {
    const list = ['todo-btn'];
    if (danger) {
      list.push('todo-btn--danger');
    } else if (plain) {
      list.push('todo-btn--plain');
    }
    return list.join(' ');
  }, [danger, plain]);

  return (
    <button
      className={btnClass}
      onClick={onClick}
      type={submit ? 'submit' : 'button'}
      style={{ width: fullWidth ? '100%' : '', ...style }}
    >
      {children}
    </button>
  );
};

export const DelButton = (props: IDelProps) => {
  const { onRemove, style = {} } = props;
  return (
    <>
      <Popconfirm title="确认删除？" onConfirm={onRemove}>
        <TButton danger style={style}>
          <DeleteIcon />
        </TButton>
      </Popconfirm>
    </>
  );
};

export default TButton;
